<template>
    <div :class="[fun.getPhoneEnv() == 3 ? 'pcStyle' : '']" class="dy-details">
        <c-title text="商品详情"></c-title>
        <U_backup :btnFlag="btnFlag" :id="1" :datas="btnData"></U_backup>
        <U_backup :btnFlag="true" :id="2" :datas="btnData2" :poster="1" @poster="post_handle()"></U_backup>
        <goodSwipe v-if="goods_info.product_img && goods_info.product_img.length !== 0"
            :thumb_url="goods_info.product_img.url_list || []" :thumb="goods_info.product_img.url_list"
            class="swipe-box" style="height: unset;"></goodSwipe>


        <div class="goods-head">
            <div class="goods-head-left">
                <div class="goods-price"><span style="font-size: 0.875rem;">¥</span>{{ goods_info.price }}</div>
                <div class="goods-origin-price">¥{{ goods_info.origin_price }}</div>
                <div>
                    <div class="goods-discount">{{ goods_info.discount }}</div>
                </div>
            </div>
            <div @click="isShowSharePopup()">
                <i class="iconfont icon-fenxiang"></i>
                <div class="share_text">分享</div>
            </div>
        </div>


        <div class="store">
            <div class="title">{{ goods_info.name }}</div>
            <div class="flex-center mb-24">
                <span class="store-tips">服务</span>
                <div class="flex" style="flex-wrap: wrap;">
                    <span class="store-content" v-for="(item, i) in goods_info.sale_tags" :key="i"
                        style="margin-right: 0.3125rem;line-height:normal;"> {{ item }}</span>

                </div>
            </div>

            <div class="flex-center mb-24" v-if="goods_info.nearest_poi">
                <span class="store-tips">门店</span>
                <span class="store-content">最近 {{ goods_info.nearest_poi.distance }} ·
                    {{ goods_info.nearest_poi.name }}</span>
            </div>
            <div class="flex-center mb-24">
                <span class="store-tips">已售</span>
                <span class="store-content">{{ goods_info.blurred_sold_count }}份</span>
            </div>
            <div class="flex-center" v-if="discount_amount">
                <span class="store-tips">优惠券</span>
                <span class="store-content">可领<span style="color:#F15353;">{{discount_amount }}元</span>优惠券</span>
            </div>
        </div>
        <div class="reward" v-if="goods_info.rewards && goods_info.rewards.length !== 0">
            <div class="reward-title">
                <span class="reward-tips">奖励信息&nbsp;</span>
                <span class="reward-title-right">(预估奖励，实际奖励以最终返回结果为准)</span>
                <img :src="imgHost + '/static/local/tiktok-group-buy/jiangli.png'" alt="">
            </div>
            <div class="reward-content">
                <div class="flex-center mb-24" v-for="item in goods_info.rewards">
                    <span class="reward-content-left">{{ item.reward_type }}</span><span>{{ item.value }}</span>
                </div>
            </div>
        </div>

        <div class="group-buying">
            <div class="group-title">团购详情</div>
            <div class="group-buying-box" v-for="(item, index) in goods_info.product_item_detail" :key="index">
                <div class="dish-name">{{ item.title }}</div>
                <div class="menu-name" v-for="(c_item, c_index) in item.item_list" :key="c_index">
                    <span class="menu-name-left">{{ c_item.name }}</span>
                    <div class="flex-center" style="flex-shrink: 0;">
                        <span class="count">（{{ c_item.count }}份）</span>
                        <span class="menu-price">¥{{ c_item.price }}</span>
                    </div>
                </div>
                <div class="group-line" v-if="index + 1 !== goods_info.product_item_detail.length"></div>
            </div>
        </div>

        <!--群活码-->
        <div class="group-code" v-if="goods_info.plugin && goods_info.plugin.group_code.length !== 0">
            <div class="group-code-face" v-if="goods_info.plugin && goods_info.plugin.group_code.code_logo">
                <img :src="goods_info.plugin && goods_info.plugin.group_code.code_logo" alt="" />
            </div>
            <div class="group-code-content">
                <div class="group-code-name">{{ goods_info.plugin.group_code.code_title }}邀请您添加专属福利群！</div>
                <div class="group-code-desc">{{ goods_info.plugin.group_code.citation_copy }}</div>
            </div>
            <div class="group-code-button" @click="toGroupCode">去加群</div>
        </div>

        <div class="goods-details" v-if="url_list.length !== 0">
            <div class="goods-details-title">商品详情</div>
            <template v-if="url_list.length !== 0">
                <img v-for="item in url_list" :src="item"></img>
            </template>
        </div>

        <div class="footer">
            <div class="footer-item" @click="home">
                <van-icon name="shop-o" />
                <span>首页</span>
            </div>
            <div class="footer-item" style="margin-left: 0.9375rem;margin-right: .75rem;" @click="clickChat">
                <van-icon name="chat-o" />
                <span>客服</span>
            </div>
            <div class="flex-cetner">
                <div class="share" @click="share_flag = true;">去分享</div>
                <button class="pay" @click="dy_flag = true">去抢购</button>
            </div>
        </div>

        <van-popup v-model="dy_flag" class="customer-box " :class="{ 'pc-style': fun.isPc() }">
            <div :class="{ 'center': fun.isPc() }">
                <div class="customer-popup">
                    <div class="customer-popup-title">抖口令</div>
                    <div class="customer-popup-content">
                        <p class="popup-tips-txt">{{ goods_info.name }}</p>
                        <p class="popup-tips-txt">抖音价：{{ goods_info.price }}元</p>
                        <p class="popup-line"></p>
                        {{ dy_share_command }}
                        <p class="popup-line"></p>
                        <p class="popup-tips-txt" style="text-wrap: nowrap;">长按复制，打开抖音APP，抢购团购套餐！</p>
                    </div>
                    <div class="poup-button" v-clipboard:copy="dy_share_command" v-clipboard:success="onCopy">复制口令
                    </div>
                    <div class="popup-tips">复制口令，打开抖音APP，抢购团购套餐！</div>

                </div>
                <div style="padding-top: 1.25rem;">
                    <i class="iconfont icon-adsystem_icon_cancle" @click="dy_flag = false"></i>

                </div>

            </div>
        </van-popup>

        <van-popup v-model="share_flag" round position="bottom">
            <div class="share-box">
                <div class="share-tips">
                    <span style="font-size: 1rem;font-weight: bold;
                    color: #00001C;">分享商品</span>
                    <van-icon name="cross" @click="share_flag = false" />
                </div>
                <div class="share-post">
                    <div class="flex-center" style="justify-content: space-between;">
                        <div>
                            <div class="share-txt">分享海报</div>
                            <div class="share-txt-tips">可选择主图，点击生成海报！生成后长按保存！</div>
                        </div>
                        <div class="share-button" @click="post_handle">生成海报</div>
                    </div>
                    <div class="flex-center mt-24" v-if="goods_info.product_img && goods_info.product_img.url_list">
                        <div v-for="(item, i) in goods_info.product_img.url_list" :key="i"
                            style="position: relative;width: 5rem;height:5rem" @click="choose_poster(i)">
                            <img :src="item" alt="">
                            <div style="font-size: 20px;" class="round-right">
                                <van-icon name="success" class="product-icon"
                                    :class="choose_index == i ? 'choose-current' : ''" />
                            </div>

                        </div>

                    </div>
                </div>
                <div class="share-copy-box">
                    <div class="flex-center between share-copy-box-head">
                        <div class="share-txt" style="margin-bottom: 0;">分享文案</div>
                        <div class="share-button"
                            v-clipboard:copy="radio == 1 ? dy_share_link : dy_share_command"
                            v-clipboard:success="onCopy">复制文案</div>
                    </div>
                    <div style="padding:0 0.75rem 0.75rem;">
                        <van-radio-group v-model="radio" direction="horizontal">
                            <van-radio name="1" checked-color="#F15353">详情地址</van-radio>
                            <van-radio name="2" checked-color="#F15353">抖口令</van-radio>
                        </van-radio-group>
                        <div class="share-tips-txt" v-if="radio == 2">直接复制抖音口令分享，您的好友购买后奖励将归您所有，复制您口令购买团购的用户无奖励；也无法锁客！
                        </div>
                    </div>
                    <div class="customer-popup-content" style="margin-bottom:0;">
                        <p class="popup-tips-txt">{{ goods_info.name }}</p>
                        <p class="popup-tips-txt">抖音价：{{ goods_info.price }}元</p>
                        <p class="popup-line"></p>
                        {{ radio == 1 ? dy_share_link : dy_share_command }}
                        <p class="popup-line" v-if="radio == 2"></p>
                        <p class="popup-tips-txt" v-if="radio == 2">长按复制，打开抖音APP，抢购团购套餐！</p>
                    </div>

                </div>
                <div class="share-bottom">
                    <div class="share-round">1</div><span class="color-6E6E79 fz-24">生成海报</span>
                    <div class="line-box"><span></span><span></span><span></span></div>
                    <div class="share-round">2</div><span class="color-6E6E79 fz-24">保存海报到手机相册</span>
                    <div class="line-box"><span></span><span></span><span></span></div>
                    <div class="share-round">3</div><span class="color-6E6E79 fz-24">复制文案</span><br />
                </div>
                <div class="color-6E6E79 fz-24" style="text-align: center;">可分享到朋友圈、群、好友等场景！</div>
            </div>
        </van-popup>

        <!-- 分享弹窗 -->
        <van-popup v-model="showShare" round closeable get-container="#app">
            <div class="share-title">分享</div>
            <div class="share-list" @click="showShare = false">
                <div class="share-list-chile" v-if="this.fun.getTyep() != 5 || this.fun.isCPS()" @click="shareWeixin()">
                    <div class="share-list-icon"><i class="iconfont icon-fx_haoyou"></i></div>
                    分享好友
                </div>
                <div class="share-list-chile" @click="post_handle()">
                    <div class="share-list-icon color2"><i class="iconfont icon-erweima"></i></div>
                    分享海报
                </div>
                <!-- <div class="share-list-chile" v-if="wx_video_link == 1" @click.stop="getVideoLink()">
                    <div class="share-list-icon color3"><i class="iconfont icon-ht_operation_copyline"></i></div>
                    视频号链接
                </div>
                <div class="share-list-chile"
                    v-if="plugin_setting && plugin_setting.douyin_share && plugin_setting.douyin_share.status"
                    @click.stop="getDouyinOptions()">
                    <div class="share-list-icon" style="background: #fff;"><i class="iconfont icon-all_trill"
                            style="color: #000; font-size: 40px;"></i></div>
                    分享抖音
                </div> -->
            </div>
        </van-popup>
        <!-- 微信小店复制弹窗 -->
        <van-popup v-model="showVideoLink" round closeable get-container="#appMain">
            <div class="video-link-copy">
                <div class="video-link-copy-btn" v-if="!fun.isTextEmpty(article_url)" @click.stop
                    v-clipboard:copy="article_url" v-clipboard:success="onCopy">一键复制</div>
                <div class="video-link-copy-text">复制链接，<br />微信小店发布视频粘贴扩展链接</div>
                <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/goods/videolink.png" alt=""
                    class="video-link-copy-img" />
            </div>
        </van-popup>

        <yz-goodsposter v-model="posterShow" :posterData="isFrontCanvas ? posterImg : {}"
            :defaultImg="!isFrontCanvas ? posterImg : ''" :goodstype="true"
            plugin_name="tiktok_group_buy"></yz-goodsposter>

        <cservice-popup :show="show1" :cservice="btnData.cservice" :service_mobile="btnData.service_mobile"
            :service_QRcode="btnData.service_QRcode" @close="show1 = false"></cservice-popup>
    </div>
</template>

<script>
import { Toast } from "vant";
import yzGoodsposter from "components/ui_components/yz_goodsPoster";
import cservicePopup from "../../components/goods/children/plugin/cservicePopup";
import U_backup from "components/new_diy/backup";
import goodSwipe from "components/goods/children/goodSwipe"; //轮播
export default {
    components: {
        U_backup, goodSwipe, cservicePopup, yzGoodsposter
    },
    data() {
        return {
            discount_amount:0,
            showShare: false,
            posterShow: false,
            posterImg: "",
            isFrontCanvas: true,
            imgHost: window.location.origin,
            radio: "1",
            share_flag: false,
            dy_flag: false,
            btnData: {
                service_QRcode: "",
                service_mobile: "",
                cservice: "",
                button_size: 40,
                over_top: 500,
                position_location: "right",
                icon_url: "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/icon-fontclass-zhiding.png"
            },
            // 海报按钮
            btnData2: {
                button_size: 40,
                over_top: 450,
                position_location: "right",
                icon_url: "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/bc_eweima.png"
            },
            hoet: false,
            goods_info: {},
            btnFlag: false, //显示回到顶部
            favorite: false,
            goods_type: "",
            showGood: false,
            goods_id: '',
            show1: false,
            point: {},
            citycode: "",
            dy_share_command: "",
            dy_share_link: "",
            choose_index: 0,
            url_list: [],
        };
    },
    activated() {
        this.init();
        let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
        let dy_group_code = localStorage.getItem("dy_group_code");
        if(this.$route.params.city_code){
            this.citycode = this.$route.params.city_code
        }else if(dy_group_code){
            this.citycode = dy_group_code
        }
        if (myLoaction) {
            this.point = myLoaction.point;
            if(!dy_group_code){
                this.citycode = myLoaction.addressComponent.adcode || '';
            }
        } else {
            this.fun
                .getLocation()
                .then((res) => {
                    this.point = res.point;
                    if(!dy_group_code){
                        this.citycode = myLoaction.addressComponent.adcode ||'';
                        localStorage.setItem('dy_group_code', myLoaction.addressComponent.adcode)
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        }
       
        this.getData();

    },
    deactivated() {
        window.document.removeEventListener("touchstart", this.move, false);
        window.document.removeEventListener("touchmove", this.move, false);
    },

    methods: {
        init() {
            this.choose_index = 0;
            this.showShare = false;
            this.posterShow = false;
            this.share_flag = false;
            this.dy_flag = false;
            this.show1 = false;
            this.goods_id = this.$route.params.id;
            this.showGood = false;
        },
        isShowSharePopup() {
            this.showShare = true;
        },
        onCopy() {
            Toast({
                message: "复制成功",
                position: "bottom",
                duration: 5000
            });
        },
        clickChat() {
            let setServicePlugin = this.fun.isTextEmpty(this.btnData.service_mobile) && this.fun.isTextEmpty(this.btnData.service_QRcode);
            if (this.fun.isTextEmpty(this.btnData.cservice) && setServicePlugin) {
                return this.$toast("抱歉，暂未设置客服信息");
            }
            if (!this.fun.isTextEmpty(this.btnData.cservice) && setServicePlugin) {
                //只设置了客服链接，直接跳转
                if (this.cservice && this.cservice.indexOf("chatWindow") >= 0) {
                    window.location.href = this.btnData.cservice + "&goods_id=" + this.$route.params.id;
                } else {
                    window.location.href = this.btnData.cservice;
                }
                return;
            }
            console.log("tiaoz===")
            this.show1 = true;
        },
        post_handle() {
            let toastPoster = Toast({
                duration: -1, // 持续展示 toast
                message: "正在为您生成海报中"
            });
            let json = {
                product_id: this.goods_id, index: this.choose_index
            };
            if(this.citycode){
                json.city_code = this.citycode+'';
            }
            let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
            if (this.point.lat) {
                let latitude = '';
                let longitude = '';
                if (this.city_name == myLoaction.city) {
                    latitude = myLoaction.point.lat * 1;
                    longitude = myLoaction.point.lng * 1;
                } else {
                    latitude = this.point.lat * 1;
                    longitude = this.point.lng * 1;
                }
                json.latitude = latitude;
                json.longitude = longitude;
            }
            if(this.city_code==''&&this.point.lat==''){
                if (localStorage.getItem('dy_group_code')) {
                    json.city_code = localStorage.getItem('dy_group_code');
                }
            }
            $http
                .get("plugin.tiktok-group-buy.api.poster.get-poster", json, "")
                .then(response => {
                    toastPoster.clear();
                    if (response.result == 1) {

                        // isFrontCanvas 是否需要前端生成海报
                        this.posterImg = this.isFrontCanvas ? response.data : `${response.data.image_url}?${Date.now()}`;
                        this.posterShow = true;
                    } else {
                        this.posterShow = false;
                        this.$dialog.alert({ message: response.msg });
                    }
                })
                .catch(error => {
                    toastPoster.clear();
                    console.log(error);
                });
        },
   
        slider() {
            let that = this;
            window.onscroll = function () {
                var top = document.documentElement.scrollTop || document.body.scrollTop;

                that.hoet = top <= 40 ? false : true;
                that.btnFlag = top > 120 ? true : false;

                //滑动到底部禁止反弹
                if (document.documentElement.scrollHeight == document.documentElement.clientHeight + top) {
                    //alert("Touch_Buttom!");
                    document.addEventListener("touchstart", this.move, false);
                    document.addEventListener("touchmove", this.move, false);
                }
            };
        }, move(event) {
            // 判断默认行为是否可以被禁用
            if (event.cancelable) {
                // 判断默认行为是否已经被禁用
                if (!event.defaultPrevented) {
                    event.preventDefault();
                }
            }
        },
        getData() {
            let json = {
                product_id: this.goods_id
            };
            if (this.point.lat) {
                json.latitude = this.point.lat * 1;
                json.longitude = this.point.lng * 1;
            }
            if (this.citycode) {
                json.city_code = this.citycode;
            }
            $http.post("plugin.tiktok-group-buy.api.goods.good-detail", { search: json }, '').then(res => {
                if (res.result) {
                    let data = res.data;
                    console.log(data, 'data===');
                    this.goods_info = data;
                    if (data.product_detail_img && data.product_detail_img.length !== 0) {
                        this.url_list = data.product_detail_img;
                    }
                    this.get_tranfer(data)
                    if (data.plugin.cservice) {
                        this.btnData.cservice = data.plugin.cservice.cservice;
                        this.btnData.service_QRcode = data.plugin.cservice.service_QRcode;
                        this.btnData.service_mobile = data.plugin.cservice.service_mobile;
                    }
                    if(data.marketing_info&&data.marketing_info.coupon_list&&data.marketing_info.coupon_list.length!==0){
                        this.discount_amount = data.marketing_info.coupon_list[0].discount_amount;
                    }
                }else{
                    this.$toast(res.msg);
                }

                this.slider();
            })

        },
        get_tranfer(data) {
            $http.get("plugin.tiktok-group-buy.api.goods.tranfer-link", { product_id: this.goods_id }, '').then(res => {
                if (res.result) {
                    this.dy_share_command = res.data.dy_share_command;
                    this.dy_share_link = res.data.dy_share_link;
                }
            })
    },
    shareByApp(json) {
        if (this.fun.isCPS()) {
            if (this.fun.isIosOrAndroid() === "ios") {
                shareByH5IOS({ body: "shareByH5IOS", json: JSON.stringify(json) });
            } else {
                shareByH5Android(JSON.stringify(json));
            }
        } else {
            YDB.Share(json.title, json.desc, json.imgUrl, json.link, "Sharesback");
        }
    },
    //APP分享
    shareWeixin() {
        //不是微信端 不访问
        if (this.fun.getTyep() == 5) {
            return;
        } else if (this.fun.getTyep() == 7 || this.fun.isCPS()) {
            this.shareByApp(this.setShareInfo);
            return;
        }
        this.$dialog.alert({ message: "请点击右上角微信分享" });
    },
    gotoMember() {
        this.$router.push(this.fun.getUrl("member", {}));
    },  // 群活码跳转
    toGroupCode() {
        if (this.goods_info.plugin.group_code.jump_mode === 'home') {
            this.$router.push(this.fun.getUrl("groupCode"));
        } else if (this.goods_info.plugin.group_code.code_url) {
            window.location.href = this.goods_info.plugin.group_code.code_url;
        }
    }, toBrandDetail(val) {
        this.$router.push(this.fun.getUrl("GoodsBrand", { id: val }));
    },
    goto() {
        if (this.fun.isCPS()) {
            if (this.fun.isIosOrAndroid() === "ios") {
                routeBackUrlIOS({ body: "routeBackUrlIOS" });
            } else {
                routeBackUrlAndroid();
            }
            return;
        }
        if (share_tag == "-1") {
            this.$router.go(-1);
        } else {
            this.$router.push(this.fun.getUrl("home", {}));
        }
    },
    home() {
        this.$router.push(this.fun.getUrl("dy_group_buy"))
    },
    choose_poster(index) {
        this.choose_index = index;
    },
}
};
</script>

<style>
.dy-details .swipe-box .swiper {
    height: unset !important;
}
</style>
<style scoped lang='scss'>
.popup-line {
    width: 9.375rem;
    height: 1px;
    border-bottom: #00001C dotted;
    margin: 0.625rem 0;
}

.popup-tips-txt {
    text-align: left;
    font-size: 0.8125rem;
    color: #00001C;
}

.icon-fenxiang {
    color: #2b2b2b;
    line-height: 1;
    font-weight: 700;
    padding-bottom: .2rem;
}

.share-title {
    height: 3rem;
    line-height: 3.5rem;
}

.share-list {
    width: 16rem;
    display: flex;
    flex-wrap: wrap;
    padding: 0 1rem 1rem;
    justify-content: space-between;

    .share-list-chile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 1rem 1.5rem;
        font-size: 12px;

        .share-list-icon {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            background: #fac337;
            line-height: 2.5rem;
            overflow: hidden;
            margin-bottom: 0.5rem;

            i {
                color: #fff;
                font-size: 20px;
            }
        }

        .color2 {
            background: #ff9329;
        }

        .color3 {
            background: #2aa7fb;
        }

        .color4 {
            background: #000;
        }
    }
}

.share_text {
    margin-top: .2rem;
    font-size: 10px;
    color: #828282;
}

.choose-current {
    border-color: rgb(241, 83, 83) !important;
    background-color: rgb(241, 83, 83) !important;
    color: #fff !important;
}

.product-icon {
    display: block;
    box-sizing: border-box;
    width: 1.25em;
    height: 1.25em;
    color: transparent;
    font-size: 0.8em;
    line-height: 1.25;
    text-align: center;
    border-radius: 100%;
    border: 1px solid #c8c9cc;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-property: color, border-color, background-color;
    transition-property: color, border-color, background-color;
}

.round-right {
    position: absolute;
    right: .25rem;
    top: .25rem;
}

.goods-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    margin: .625rem 0.75rem;
    border-radius: 0.5rem;
    padding: 0 .75rem;
    height: 3.4375rem;

    &-left {
        display: flex;
        align-items: baseline;

    }

    .goods-discount {
        height: 1rem;
        line-height: 1rem;
        padding: 0 .3125rem;
        font-size: .75rem;
        color: #F15353;
        border-radius: 0.25rem;
        // opacity: 0.1;
        background-color: #FEEDED;
        margin-bottom: .1875rem;
    }

    .goods-origin-price {
        text-decoration-line: line-through;
        font-weight: 400;
        font-size: 0.8125rem;
        color: #6E6E79;
        margin: 0 .3438rem;
    }

    .goods-price {
        font-size: 1.4375rem;
        color: #F15353;
        font-weight: bold;
    }

}

.pc-style {
    position: fixed;
    left: 50% !important;
    right: unset !important;
    transform: translate(-50%, -50%) !important;

    .center {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.customer-popup-title {
    text-align: center;
    margin-top: 1.0625rem;
    margin-bottom: .8438rem;
    font-weight: bold;
    font-size: 1rem;
    color: #00001C;
    line-height: 1;
}

.customer-popup {
    width: 18.75rem;
    background: #FFFFFF;
    border-radius: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
    border: 0.0313rem solid #707070;
    overflow: hidden;
}

.footer-item ::v-deep .van-icon {
    font-size: 1.1rem;
}

.customer-box {
    background-color: transparent !important;
}


.dy-details {
    padding-bottom: 4.4688rem;

    .flex-center {
        display: flex;
        align-items: center;
    }

    .mb-24 {
        margin-bottom: .75rem;
    }

    /* 群活码 */
    .group-code {
        display: flex;
        align-items: center;
        text-align: left;
        background-color: #fff;
        padding: 0.6rem;
        border-radius: 10px;
        margin: 10px;

        .group-code-face {
            width: 2.5rem;
            height: 2.5rem;

            img {
                width: 2.5rem;
                height: 2.5rem;
                border-radius: 50%;
            }
        }

        .group-code-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 2rem;
            padding-right: 1rem;
            padding-left: 0.5rem;
            line-height: 1.125rem;

            .group-code-name {
                font-size: 13px;
                font-weight: bold;
                color: #353535;
            }

            .group-code-desc {
                font-size: 10px;
                color: #6c6c6c;
            }
        }

        .group-code-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 3.75rem;
            height: 1.5rem;
            line-height: 1.5rem;
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            background-color: #ff9600;
            border-radius: 0.75rem;
        }
    }

    .reward {
        margin: .625rem .75rem;
        background: linear-gradient(180deg, #FFEAC8 0%, #FFFFFF 100%);
        border-radius: 0.75rem;
        border: 1px solid #FFFFFF;

        &-content {
            border-radius: 0.5rem;
            background: #FFFFFF;
            padding: .75rem .375rem .9375rem;
            box-sizing: border-box;
            line-height: 1;
            margin: 0 .3125rem 0;
        }

        &-content-left {
            min-width: 3.25rem;
            margin-right: .7188rem;
            font-weight: 500;
            font-size: 0.8125rem;
            color: #00001C;
            text-align: left;
        }

        .reward-title {
            display: flex;
            align-items: center;
            height: 2.75rem;
            margin-left: 0.875rem;
            position: relative;
            font-size: .9375rem;

            img {
                position: absolute;
                top: 0;
                right: .75rem;
                width: 1.8438rem;
            }

            &-right {
                font-weight: 400;
                font-size: 0.75rem;
                color: #672000;
                line-height: 1;
            }
        }

        .reward-tips {
            font-weight: bold;
            font-size: 0.9375rem;
            color: #672000;
            line-height: 1;
            margin-right: .0938rem;
        }
    }

    .store {
        margin: .625rem .75rem;
        background-color: #fff;
        border-radius: 0.5rem;
        padding: .9375rem .75rem;
        box-sizing: border-box;


        .store-tips {
            font-weight: 500;
            font-size: 0.8125rem;
            color: #00001C;
            width: 3.9688rem;
            text-align: left;
            line-height: 1;
            flex-shrink: 0;

        }

        .store-content {
            font-weight: 400;
            font-size: 0.8125rem;
            color: #00001C;
            line-height: 1;
            text-align: left;
        }

        .title {
            font-weight: 500;
            font-size: 1rem;
            // line-height: ;
            color: #00001C;
            text-align: left;
            padding-bottom: 0.9375rem;
            border-bottom: 1px solid #F0F0F1;
            // line-height: 1;
            margin-bottom: .9375rem;
        }
    }

    .group-buying {
        background: #FFFFFF;
        border-radius: 0.75rem;
        margin: .625rem .75rem;
        padding: .8438rem .6875rem 1.25rem;

        .group-line {
            height: 1px;
            background: #F0F0F1;
            margin: .9375rem 0 .9375rem 1.0625rem;
        }

        &-box {
            margin-top: .9375rem;
        }

        .count {
            font-weight: 400;
            font-size: 0.875rem;
            color: #999999;
            line-height: 1;
            margin-right: .1875rem;
        }

        .menu-price {
            font-weight: 400;
            font-size: 0.875rem;
            color: #00001C;
            line-height: 1;
        }

        .menu-name {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: .9375rem;
            padding-left: .9375rem;
        }

        .menu-name-left {
            font-weight: 400;
            font-size: 0.875rem;
            color: #00001C;
            // line-height: 1;
            text-align: left;
        }

        .group-title {
            font-weight: bold;
            font-size: 0.9375rem;
            color: #00001C;
            line-height: 1;
            text-align: left;
        }

        .dish-name {
            position: relative;
            font-weight: bold;
            font-size: 0.875rem;
            color: #00001C;
            line-height: 1;
            padding-left: .9375rem;
            text-align: left;
        }

        .dish-name::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0.3125rem;
            border-radius: 100%;
            width: 0.25rem;
            height: 0.25rem;
            background: #D2D2D2;
        }
    }


    .goods-details {
        padding: .9375rem 0.75rem;
        box-sizing: border-box;
        border-radius: 0.5rem;
        margin: .625rem .75rem;
        background-color: #fff;

        &-title {
            font-weight: 500;
            font-size: 0.9375rem;
            color: #00001C;
            text-align: left;
            line-height: 1;
            margin-bottom: .625rem;
        }

        img {
            display: block;
            width: 100%;
        }
    }

    .fz-24 {
        font-size: .75rem;
    }

    .color-6E6E79 {
        color: #6E6E79;
    }

    .share-tips-txt {
        font-weight: 400;
        font-size: 0.75rem;
        color: #F15353;
        line-height: 1rem;
        text-align: left;
        margin-top: .75rem;
    }

    .line-box {
        width: 0.9375rem;
        margin: 0 .25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
            width: 0.25rem;
            height: 1px;
            background-color: #AAAAB3;
        }
    }

    .share-bottom {
        display: flex;
        flex-wrap: wrap;
        padding: 0 .875rem;
    }

    .share-round {
        width: 1.25rem;
        border-radius: 50%;
        height: 1.25rem;
        margin-right: .1875rem;
        border: 1px solid #999999;
        font-size: .75rem;
    }

    .between {
        justify-content: space-between;
    }

    .share-copy-box-head {
        padding: .75rem .625rem .125rem .75rem;
    }

    .share-copy-box {
        margin: .625rem 0;
        background: #FFFFFF;
        border-radius: 0.5rem;
        padding-bottom: .75rem;
    }

    .share-button {
        width: 4.625rem;
        height: 1.75rem;
        line-height: 1.75rem;
        text-align: center;
        background: #F15353;
        border-radius: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
        font-weight: 500;
        font-size: 0.8125rem;
        color: #FFFFFF;
    }

    .share-txt {
        font-weight: bold;
        font-size: 0.9375rem;
        color: #00001C;
        text-align: left;
        line-height: 1;
        margin-bottom: .4688rem;
    }

    .share-txt-tips {
        font-weight: 400;
        font-size: 0.75rem;
        color: #6E6E79;
        line-height: 1;
        text-align: left;
    }

    .share-box {
        padding: 1.5rem .75rem 2.25rem;
        box-sizing: border-box;
        background-color: #F5F5F5;
        height: 100%;

        img {
            width: 5rem;
            height: 5rem;
            margin: 0 .5rem 0 0;
            border-radius: 0.5rem;
        }
    }

    .mt-24 {
        margin-top: .75rem;
    }

    .share-post {

        height: 9.5938rem;
        background: #FFFFFF;
        border-radius: 0.5rem;
        padding: .9375rem .625rem .75rem;
    }

    .share-tips {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 1;
        padding: 0 .1875rem .9375rem;
    }

    .popup-tips {
        font-weight: 400;
        font-size: 0.8125rem;
        color: #3B3B4A;
        text-align: center;
        line-height: 1;
        padding-bottom: 1.1875rem;
    }

    .poup-button {
        margin: 1.25rem 1.25rem .9688rem;
        height: 2.4063rem;
        line-height: 2.4063rem;
        background: #F15353;
        border-radius: 1.25rem;
        font-weight: 500;
        font-size: 0.9375rem;
        color: #FFFFFF;
    }

    .customer-popup-content {
        margin: 0 .9375rem 1.25rem;
        max-height: 10.7813rem;
        overflow-y: scroll;
        padding: 0.7813rem 0.75rem;
        background: #F5F5F5;
        border-radius: 0.5rem;
        word-wrap: break-word;
    }

    .icon-adsystem_icon_cancle {
        font-size: 3.125rem;
        color: #D6D6DC;
    }


    .flex-cetner {
        display: flex;
        align-items: center;

    }

    .footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3.0625rem;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;

    }

    .footer-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 1.2188rem;

        span {
            font-weight: 400;
            font-size: 0.6875rem;
            color: #6E6E79;
        }
    }

    .pay {
        font-weight: 500;
        font-size: 0.9375rem;
        color: #FFFFFF;
        margin: 0 .6875rem;

        width: 7.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        border: none;
        background: #F15353;
        border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
    }

    .share {

        font-weight: 500;
        text-align: center;
        font-size: 0.9375rem;
        color: #F15353;
        width: 7.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
        border: 1px solid #F15353;
    }
}



#shopInfo {

    // height: 80vh;
    #tabs {
        #goods_content {
            padding: 0.6rem;
            margin-bottom: 0.625rem;
            background: #fff;

            img {
                max-width: 100%;
            }

            ::v-deep em {
                font-style: italic;
            }
        }
    }
}





#hoid {
    padding: 0.3125rem;
    width: 1.6rem;
    position: fixed;
    z-index: 2;
    height: 2.25rem;
}


#back {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    text-indent: 0;
    line-height: 1.7rem;
    overflow: hidden;
}

.hoet #back {
    transition: 0.1s;
    background-color: rgba(237, 237, 237, 0);
    color: #1f1f1f;
}

#member {
    padding: 0.3125rem;
    width: 1.6rem;
    position: fixed;
    z-index: 2;
    box-sizing: content-box;
    right: 0;
}


.pcStyle {
    .footer {
        width: 375px !important;
        left: 50%;
        transform: translate(-50%, 0);
    }

    #hoid {
        width: 375px !important;
    }

    #member {
        right: 50% !important;
        margin-right: -150px;
    }
}
</style>